<template>
  <q-page class="bg-grey-2">
    <q-header bordered class="bg-white text-dark q-py-sm">
      <q-toolbar class="flex justify-between">
        <q-btn icon="arrow_back_ios" flat dense round color="grey-8" @click="$router.back()" />
        <div class="text-bold text-h6">设置</div>
        <div></div>
      </q-toolbar>
    </q-header>

    <div class="q-pa-md">
      <q-list separator class="bg-white" style="border-radius: 15px;">
        <q-item clickable v-ripple v-for="(item, idx) in config" :key="idx" style="padding-right: 0;" @click="editor(item)">
          <q-item-section class="text-grey-8">{{ item.label }}</q-item-section>
          <q-item-section>
            <div class="row items-center justify-end">
              <div v-if="item.type === 'text'" :class="item.readonly && 'text-grey-8'">{{ consumer[item.name] }}</div>
              <div v-else-if="item.type === 'select'">{{ consumer[item.name] && dictObj[item.dict] && dictObj[item.dict][consumer[item.name]].label }}</div>
              <div v-else-if="item.type === 'image'">
                <q-avatar size="68px" rounded>
                  <img :src="consumer[item.name] || '/images/avatar.png'">
                </q-avatar>
              </div>
              <q-avatar rounded text-color="grey-8" icon="arrow_forward_ios" />
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </div>

    <q-footer class="bg-white text-dark q-ma-sm">
      <q-btn color="negative" rounded label="退出登录" style="width: 100%;" @click="logout" />
    </q-footer>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'shopSetting',
  data () {
    return {
      consumer: {},
      config: [
        { name: 'headimg', label: '头像', type: 'image' },
        { name: 'nickname', label: '昵称', type: 'text' },
        { name: 'fullname', label: '真实姓名', type: 'text' },
        { name: 'gender', label: '性别', type: 'select', dict: 'gender' },
        { name: 'tel', label: '手机号', type: 'text', readonly: true },
        { name: 'company', label: '公司名称', type: 'text' },
        {
          name: 'address',
          label: '收货地址',
          type: 'list',
          columns: [
            { field: 'consignee', label: '收货人', type: 'text' },
            { field: 'tel', label: '联系电话', type: 'text' },
            { field: 'address', label: '收货地址', type: 'text', classes: 'text-bold' },
            { field: 'default', label: '默认地址', type: 'toggle', uniqueValue: true, normalValue: false, classes: 'text-orange' }
          ]
        }
      ],
      dictionary: []
    };
  },
  mounted () {
    this.consumer = this.$q.localStorage.getItem('consumer');
    this.$axios.get('/c/shop/getGenderDict').then(({ data }) => {
      this.dictionary = this.$q.localStorage.getItem('dictionary') || {};
      this.dictionary.gender = data.gender;
      this.$q.localStorage.set('dictionary', this.dictionary);
    });
  },
  methods: {
    editor (item) {
      if (!item.readonly) {
        this.$q.localStorage.set('editor', item);
        this.$router.push({ path: '/shop/editor' });
      }
    },
    logout () {
      const shopId = this.$q.localStorage.getItem('myShop')
      this.$q.localStorage.clear();
      this.$router.push({ path: `/shop/${shopId}/list` });
    }
  },
  computed: {
    dictObj () {
      const dict = {};
      for (const [key, val] of Object.entries(this.dictionary)) {
        dict[key] = val.reduce((a, b) => {
          a[b.value] = b;
          return a;
        }, {});
      }

      return dict;
    }
  }
});
</script>
